<template>

  <a-table :columns="columns"
           :data-source="dataList"
           :pagination="pagination"
           rowKey="id"
           @change="handleTableChange"

  >
    <template #bodyCell="{text, column}">
      <span v-if="!column.ellipsis">{{text}}</span>
      <a-tooltip v-else placement="topLeft">
        <template #title>{{text}}</template>
        <span>{{text}}</span>
      </a-tooltip>

    </template>
  </a-table>

</template>
<script setup lang="ts">
import {onMounted, ref, h} from "vue";
import { TableColumnType} from "ant-design-vue";
import {queryLogList} from '@/api/sys-setting/log.ts'
const generateQueryFrom = ()=>{
  return{
    pageNo:1,
    pageSize:5
  }
}
const generatePagination = ()=>{
  return{
    current:1,
    pageSize:5,
    total:0,
    showSizeChanger:false
  }
}

const queryFrom = ref(generateQueryFrom())
const pagination = ref(generatePagination())

const dataList = ref([])
const columns:TableColumnType[] = [
  {
    title: '接口名称',
    dataIndex: 'title',
    key: 'title',
    align:'center'
  },
  {
    title: '路径',
    dataIndex: 'requestUri',
    key: 'requestUri',
    align:'center',
    ellipsis:true
  },
  {
    title: '请求方法',
    dataIndex: 'method',
    key: 'method',
    align:'center'
  },
  {
    title: '请求UA',
    dataIndex: 'userAgent',
    key: 'userAgent',
    align:'center',
    ellipsis:true,
  },
  {
    title: '参数',
    dataIndex: 'params',
    key: 'params',
    align:'center',
    ellipsis:true
  },
  {
    title: '耗时(ms)',
    dataIndex: 'time',
    key: 'time',
    align:'center',
    customRender({record}) {

        return h('span',null,`${record.time}ms`)
    },
  },
  {
    title: '创建人',
    dataIndex: 'createBy',
    key: 'createBy',
    align:'center'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align:'center'
  },

];


const getList = ()=>{
  queryLogList(queryFrom.value).then((res:any)=>{
    dataList.value = res.result.records;
    pagination.value.total = res.result.total
  })
}






const handleTableChange = ({current,pageSize})=>{
  queryFrom.value.pageNo = current;
  pagination.value.current = current;
  queryFrom.value.pageSize = pageSize
  pagination.value.pageSize = pageSize
  getList();
}
onMounted(()=>{
  getList();
})
</script>
<style scoped lang="scss">

</style>
